<template>
  <table-index :table="table" :rowKey="`id`" @loadData="loadData">
    <!-- 模板名称 -->
    <template #templateName="{ record }">
      <templateName :record="record" :queryParam="queryParam" />
    </template>
    <template #siteNum="{ record }">
      <div class="site-num-wrapper">
        <span class="site-num-val">{{ record.templateType == 1 ? '全部' : record.siteNum }}</span>
        <a-button type="outline" size="mini" class="view-btn" @click="viewSiteListFn(record)">查看</a-button>
      </div>
    </template>
    <template #model-status="{ record }">
      <status-tag :value="record.status" :label="record.statusStr" />
      <!-- <templateStatus :record="record" /> -->
    </template>
  </table-index>
</template>

<script setup name="CarModelPriceListLongOrderConfig">
  import { inject } from 'vue'
  import { useTable, useFetchTableDataApi } from '@/hooks/table'
  import { getTemplateList } from '@/api/business/price.js'
  import templateName from './template-name.vue'
  import templateStatus from './template-status.vue'
  const emit = defineEmits(['viewSiteList', 'addTemplate', 'editTemplate', 'toggleStatus'])
  const queryParam = inject('queryParam')

  // 查看门店
  const viewSiteListFn = (record) => emit('viewSiteList', record)
  // 模板启用停用
  const toggleStatusFn = (record, operateName) => emit('toggleStatus', record, operateName)

  // table 配置
  const table = useTable({
    columns: [
      { title: '模板名称', dataIndex: 'templateName', slotName: 'templateName' },
      { title: '车型数量', dataIndex: 'totalModelNum' },
      { title: '应用门店数', dataIndex: 'siteNum', slotName: 'siteNum' },
      { title: '未配置车型数量', dataIndex: 'noModelNum' },
      { title: '模板状态', dataIndex: 'statusStr', width: 128, slotName: 'model-status' },
    ],
    operates: [
      {
        label: '编辑',
        permission: 'svms:business:price:car-model.edit',
        method: (record) => emit('editTemplate', record),
      },
      {
        label: '启用',
        permission: 'svms:business:price:car-model.enable',
        // 停用状态显示启用按钮
        show: (record) => record.status == 0 && record.templateType != 1,
        method: (record) => toggleStatusFn(record, '启用'),
      },
      {
        label: '停用',
        permission: 'svms:business:price:car-model.disable',
        // 停用状态显示启用按钮
        show: (record) => record.status == 1 && record.templateType != 1,
        method: (record) => toggleStatusFn(record, '停用'),
      },
    ],
    buttons: [
      {
        type: 'primary',
        icon: 'plus',
        label: '新增',
        permission: 'svms:business:price:car-model.add',
        method: (record) => emit('addTemplate', record),
      },
    ],
  })

  // 列表接口调用
  const loadData = useFetchTableDataApi(table, queryParam, getTemplateList)

  defineExpose({
    loadData,
  })
</script>

<style lang="less" scoped>
  .status-wrapper {
    height: 28px;
    .status-icon {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      margin-right: 6px;
      &.open {
        background: #00b42a;
      }
      &.close {
        background: #ea0000;
      }
    }
  }

  .site-num-wrapper {
    font-size: 14px;
    .site-num-val {
      vertical-align: middle;
      line-height: 20px;
    }
    .view-btn {
      border-radius: 2px;
      opacity: 1;
      border: 1px solid #1890ff;
      color: #1890ff;
      margin-left: 6px;
      height: 18px;
      line-height: 18px;
      padding: 0 8px;
      font-size: 12px;
      vertical-align: middle;
    }
  }
</style>
